<template>
  <div class="basic-content">
    <div v-for="(item,index) in basicList" :key="index" class="basic-one" :class="'basic'+index">
      <div class="basic-img">
        <image :src="'../../../static/project/img'+index+'.png'" />
      </div>
      <div class="basic-substance">
        <div>{{ item.number }}</div>
        <div>{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    basicList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {

  },
}
</script>
  <style lang="scss" scoped>
  .basic-content{
    width: 93%;
    margin:0 auto;
    margin-top: 15px;
    display: flex;
    flex-flow: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid #f2f2f2;
    justify-content: space-between;
    .basic-one{
        display: flex;
        width:49%;
        align-items: center;
        margin-bottom: 10px;
        .basic-img{
            display: flex;
            align-items: center;
            image{
                width:24px;
                height:24px;
            }
        }
        .basic-substance{
            padding-left: 10px;
            div:nth-child(1){
                color:#333;
                font-size: 16px;
                font-weight: 600;
            }
            div:nth-child(2){
                color:#999;
                font-size: 14px;
            }
        }
    }
    .basic1,.basic3{
        border-left:1px transparent solid;
        border-image:-webkit-linear-gradient(bottom,#fff,#fff,#e6e6e6,#fff,#fff) 1 10;
        .basic-img{
            padding-left: 43%;
        }
    }
}
  </style>
